<script setup>
import { ref, computed } from 'vue'
import { getMessageList } from '@/api/user'


// 假定用户信息
const user_id = ref('1')
// const dialogFormVisible = ref(false)
const messageList = ref([
    {
      "user_id": '',
      "nick_name": '',
      "avatar": ''
    }
])

// 获取用户消息列表
function getUserMessages() {
  getMessageList(user_id).then(res => {
    console.log(res.data)
    messageList.value = res.data.data.data;
    pageTotal.value = res.data.data.pageTotal;
    pagePages.value = res.data.data.pagePages;
  })
}
getUserMessages();

//分页
const pageTotal = ref(0);
const pagePages = ref(1);
const currentPage = ref(1);
const pageSize = ref(3);

// 计算当前页数据
const currentMessagelist = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  return messageList.value.slice(start, start + pageSize.value);
});
// 监听页码改变
function handleSizeChange(newSize) {
    pageSize.value = newSize;
    getUserMessages()
    console.log(`每页 ${newSize} 条`)
}
// 监听页码改变
function handleCurrentChange(newPage) {
    pagePages.value = newPage;
    getUserMessages()
    console.log(`当前页: ${newPage}`)
}

</script>

<template>
    <el-card class="page-container">
        <h2 style="padding-left: 30px;">消息管理</h2>
        <hr style="margin-bottom: 20px;">
        <div v-for="item in currentMessagelist" :key="item.user_id" class="course">
            <ul>
                <div class="good-item">
                    <img :src="item.avatar" style="height: 100px; width: 100px; border-radius: 5px;">
                    <li ><h3>{{ item.nick_name }}</h3></li>
                    <el-button style="width: 70px; margin-right: 50px;">
                      <div >查看消息</div>
                      <!-- <RouterLink :to="{name: 'custermer', params: {user_id: item.user_id}}">
                        <div >查看消息</div>
                      </RouterLink> -->
                    </el-button>
                </div>
            </ul>
        </div>
          <!--分页区域-->
          <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :page-sizes="[3]"
                :small="small"
                :disabled="disabled"
                :background="background"
                layout="sizes,prev, pager, next, jumper"
                :total="pageTotal"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                style="position: absolute ;bottom: 30px; margin-top: 30px; margin-left: 20%;"
            />
    </el-card>
    
  </template>
  

  <style lang="scss" scoped>

  .page-container {
    min-height: 100%;
    box-sizing: border-box;
    position: relative;
  
    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }

  .course {
    height: 120px;
    margin: 0 80px;
    padding: 0; /* 去掉默认的内边距 */
    list-style-type: none; /* 去掉默认的列表样式 */
    align-items: center; /* 垂直居中对齐 */

    .good-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #ffecec;
      border-radius: 5px;
    }

    ul{
        height: 120px;

        li{
            padding-top: -20px;
            display: inline-block; /* 设置为 inline-block */
            margin: 0 10px; /* 项之间的间距 */
        }
    } 
  }
  .img {
    width: 100px;
    height: 100px;
  }
  </style>
  